<template>
  <div id="map-style-switch"
    @mouseover="changeBox(true)"
    @mouseout="changeBox(false)"
  >
    <div class="content" :class="{mouseover:openflag===true}">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>

      <div class="style-item" :class="[{first:index==0}, {second:index==1}, {third:index==2}, {active:style==index}]"
        v-for="(img, index) of imgArr"
        :key="index"
        @click="changeMap(img.flag, index)"
      >

        <span class="title">{{ img.title }}</span>
        <div class="image"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import eventBus from '../../util/event-bus.js'
  import {mapGetters} from 'vuex'

  export default {
    name: 'MapStyleSwitch',

    data() {
      return {
        openflag: false,
        imgArr: [
          {
            flag: "standard",
            title: "标准"
          },
          {
            flag: "nightblue",
            title: "极夜蓝"
          },
          {
            flag: "lightblue",
            title: "淡雅蓝"
          }
        ],
        current: "nightblue",
      }
    },
    computed: {
       ...mapGetters(['style'])
    },

    methods: {
      changeBox(flag) {
        this.openflag = flag;
      },
      changeMap(flag, index) {
        if (index !== this.style) {
          this.current = flag;
          eventBus.$emit('mapStyleChange', index);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  #map-style-switch {
    pointer-events: auto;
    position: absolute;
    bottom: 120px;
    right: 360px;
    .content {
      height: 80px;
      width: 120px;
      cursor: pointer;
      box-sizing: border-box;
      border: 2px solid rgba(67, 142, 174, 1);
      -webkit-box-shadow: 0px 0px 30px rgba(67, 142, 174, 0.9) inset;
      box-shadow: 0px 0px 30px rgba(67, 142, 174, 0.9) inset;
      background-origin: border-box;
      background-clip: border-box;
      background-color: rgba(14, 14, 23, 0.9);
      transition-property: width;
      transition-duration: .4s;
      .icon {
        position: absolute;
        z-index: 10;
        width: 14px;
        height: 14px;
        &.top-left-icon {
          top: 0;
          left: 0;
          background: url("../../../static/images/index/top-left.png") no-repeat left top;
        }
        &.top-right-icon {
          top: 0;
          right: 0;
          background: url("../../../static/images/index/top-right.png") no-repeat right top;
        }
        &.bottom-left-icon {
          bottom: 0;
          left: 0;
          background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
        }
        &.bottom-right-icon {
          bottom: 0;
          right: 0;
          background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
        }
      }
      &.mouseover {
        width: 298px;
        .style-item{
          &.active {
            border: 2px solid rgb(253, 203, 94);
            .title {
              background-color: rgb(253, 203, 94);
              color: rgb(255, 255, 255);
            }
          }
          &:hover .title {
            background-color: rgb(253, 203, 94);
            color: rgb(255, 255, 255);
          }
        }
        .first {
          right: 202px;
        }
        .second {
          right: 106px;
        }
      }
      .style-item {
        height: 60px;
        width: 86px;
        overflow: hidden;
        position: absolute;
        border-radius: 2px;
        top: 10px;
        box-sizing: border-box;
        .title {
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 4px;
          font-size: 14px;
          line-height: 16px;
          border-top-left-radius: 2px;
          color: rgb(67, 142, 174);
        }
        .image {
          width: 100%;
          height: 100%;
        }

        &.first {
          .image {
            background-image: url("../../../static/images/mapStyle/standard.png")
          }
        }
        &.second {
          .image {
            background-image: url("../../../static/images/mapStyle/nightblue.png")
          }
        }
        &.third {
          .image {
            background-image: url("../../../static/images/mapStyle/lightblue.png")
          }
        }
      }
      .first {
        right: 20px;
        transition-property: right;
        transition-duration: .4s;
      }
      .second {
        right: 15px;
        transition-property: right;
        transition-duration: .4s;
      }
      .third {
        right: 10px;
      }
    }
  }
</style>
